<template>
	<div style="height: 100%;">
		<div :class="loadingBox ? 'tableMain-loading' : 'tableMain'" v-show="!loadingBox">
			<div class="scoreBox">
				<ul :class="'rank' + roundsIndex" v-for="(rounds, roundsIndex) in rankArr" :key="roundsIndex">
					<li v-if="pdfLoading_hideRounds(roundsIndex)" class="roundName">{{ roundsList[roundsIndex].roundsName }}</li>
					<li v-for="(item, index) in rounds" :key="`${index}a`">
						<span class="name">
							<div class="name-box">
								<div :class="item.seed_num || loadingBox ? 'name-box-top-blod' : 'name-box-top'" v-if="editNameBoo">
								  <div class="name-box-top-site" v-if="item.site">{{ item.site }}</div>
									<div class="name-box-top-name">
									  <span v-if="item.team_name">{{ item.team_name }}</span>
									  <span v-else>{{ item.user_name }}</span>
									  <div v-if="item.seed_num" style="display: flex;">(<div style="color: red">{{ item.seed_num }}</div>)</div>
									</div>
								</div>
								<el-select :placeholder="item.user_name == '轮空' ? '轮空': '请选择'" :disabled="item.user_name == '轮空'"  @change="changeName(index)" v-if="roundsIndex == 0 && !editNameBoo" size="mini" v-model="state[index]" clearable  style="bottom: 10px;right: 10px;">
								  <el-option
									v-for="(items, items_index) in getSecond"
									:key="items_index"
									:value="items.sign_id"
									:label="items.team_name ? items.team_name : items.user_name"
									:disabled="items.status"
									>
								  </el-option>
								</el-select>
								<div style="position: absolute;top: 55px;width: 60%;height: 20px;line-height: 20px;display: flex;" v-if="roundsIndex > 0 && item.score">
									<div style="display: flex;margin-left: 4px;" v-for="(game, gameIndex) in item.score" :key="`${gameIndex}a`">
										<div>{{ item | Score(game) }}</div>
										<div v-if="game.tiebreak">({{ game.tiebreak }})</div>
									</div>
									<span style="margin-left: 2px;" v-if="item.waiver_user !== 0">弃</span>
								</div>
								<div :class="loadingBox ? 'name-box-bot-limit-loading' : 'name-box-bot-limit'" v-if="item.one_limit && roundsIndex == 0">
									{{ item.one_limit | player_limit }}
								</div>
							</div>
						</span>
					</li>
				</ul>
			</div>
			<div v-if="!editNameBoo" style="text-align: center;margin-top: 20px;">
				<el-button type="primary" class='goMatchForm' size="medium" @click="cancelSign">取消</el-button>
				<el-button type="primary" class='goMatchForm' size="medium" @click="saveSign">保存</el-button>
			</div>
		</div>
		<div v-if="loadingBox" v-for="(item, pageIndex) in pdfs" :key="pageIndex" :id="'pdfDom' + pageIndex" style="padding-top: 40px;padding-bottom: 40px;position: relative;">
			<layoutTableHeader
				:match_name="MatchInfoLayout.com_name"
				:match_time="MatchInfoLayout.com_time"
				:match_location="MatchInfoLayout.address"
				:referee_name="MatchInfoLayout.referee_name"
				:project_name="project_name"
				id="pdfDomHeaders"
				:logo_url="MatchInfoLayout.logo"
			/>
			<h2 v-if="!seedStatus" style="text-align: center;margin-bottom: 20px;margin-top: 10px;">单淘汰八强</h2>
			<div :class="loadingBox ? 'tableMain-loading' : 'tableMain'" :id="customStyle ? 'customStyle' : ''">
				<div class="scoreBox" :class="{ 'signSixteenSpacing': spacing == 16, 'signEightSpacing': spacing == 8 }">
					<ul :class="'rank' + roundsIndex" v-for="(rounds, roundsIndex) in rankArr" :key="roundsIndex">
						<li v-if="pdfLoading_hideRounds(roundsIndex)" class="roundName"></li>
						<li
							v-for="(item, index) in pageIndex == 0 ? rounds.slice(0, 32) : rounds.slice(pageIndex * 32, (pageIndex + 1) * 32)"
							:key="`${index}e`"
							v-if="roundsIndex == 0"
						>
							<span class="name">
								<div class="name-box">
									<div :class="item.seed_num || loadingBox ? 'name-box-top-blod' : 'name-box-top'">
										<div class="name-box-top-site" v-if="item.site">{{ item.site }}</div>
										<div class="name-box-top-name">
											<span v-if="item.team_name">{{ item.team_name }}</span>
											<span v-else>{{ item.user_name }}</span>
											<div v-if="item.seed_num" style="display: flex;">(<div style="color: red">{{ item.seed_num }}</div>)
											</div>
										</div>
									</div>
									<div style="position: absolute;top: 55px;width: 50%;height: 20px;line-height: 20px;display: flex;" v-if="roundsIndex > 0 && item.score">
										<div style="display: flex;margin-left: 4px;" v-for="(game, gameIndex) in item.score" :key="`${gameIndex}b`">
											<div>{{ item | Score(game) }}</div>
											<div v-if="game.tiebreak">({{ game.tiebreak }})</div>
										</div>
										<span style="margin-left: 2px;" v-if="item.waiver_user !== 0">弃</span>
									</div>
									<div :class="loadingBox ? 'name-box-bot-limit-loading' : 'name-box-bot-limit'" v-if="item.one_limit && roundsIndex == 0">
										{{ item.one_limit | player_limit }}
									</div>
								</div>
							</span>
						</li>
						<li
							v-for="(item, index) in pageIndex == 0 ? rounds.slice(0, 16) : rounds.slice(pageIndex * 16, (pageIndex + 1) * 16)"
							:key="`${index}f`"
							v-if="roundsIndex == 1"
						>
							<span class="name">
								<div class="name-box">
									<div :class="item.seed_num || loadingBox ? 'name-box-top-blod' : 'name-box-top'">
										<div class="name-box-top-site" v-if="item.site">{{ item.site }}</div>
										<div class="name-box-top-name">
											<span v-if="item.team_name">{{ item.team_name }}</span>
											<span v-else>{{ item.user_name }}</span>
											<div v-if="item.seed_num" style="display: flex;">(<div style="color: red">{{ item.seed_num }}</div>)
											</div>
										</div>
									</div>
									<div style="position: absolute;top: 55px;width: 100%;height: 20px;line-height: 20px;display: flex;" v-if="roundsIndex > 0 && item.score">
										<div style="display: flex;margin-left: 4px;" v-for="(game, gameIndex) in item.score" :key="`${gameIndex}c`">
											<div>{{ item | Score(game) }}</div>
											<div v-if="game.tiebreak">({{ game.tiebreak }})</div>
										</div>
										<span style="margin-left: 2px;" v-if="item.waiver_user !== 0">弃</span>
									</div>
									<div :class="loadingBox ? 'name-box-bot-limit-loading' : 'name-box-bot-limit'" v-if="item.one_limit && roundsIndex == 0">
										{{ item.one_limit | player_limit }}
									</div>
								</div>
							</span>
						</li>
						<li v-for="(item, index) in pageIndex == 0 ? rounds.slice(0, 8) : rounds.slice(pageIndex * 8, (pageIndex + 1) * 8)" :key="item.id" v-if="roundsIndex == 2">
							<span class="name">
								<div class="name-box">
									<div :class="item.seed_num || loadingBox ? 'name-box-top-blod' : 'name-box-top'">
										<div class="name-box-top-site" v-if="item.site">{{ item.site }}</div>
										<div class="name-box-top-name">
											<span v-if="item.team_name">{{ item.team_name }}</span>
											<span v-else>{{ item.user_name }}</span>
											<div v-if="item.seed_num" style="display: flex;">(<div style="color: red">{{ item.seed_num }}</div>)
											</div>
										</div>
									</div>
									<div style="position: absolute;top: 55px;width: 100%;height: 20px;line-height: 20px;display: flex;" v-if="roundsIndex > 0 && item.score">
										<div style="display: flex;margin-left: 4px;" v-for="(game, gameIndex) in item.score" :key="`${gameIndex}c`">
											<div>{{ item | Score(game) }}</div>
											<div v-if="game.tiebreak">({{ game.tiebreak }})</div>
										</div>
										<span style="margin-left: 2px;" v-if="item.waiver_user !== 0">弃</span>
									</div>
									<div :class="loadingBox ? 'name-box-bot-limit-loading' : 'name-box-bot-limit'" v-if="item.one_limit && roundsIndex == 0">
										{{ item.one_limit | player_limit }}
									</div>
								</div>
							</span>
						</li>
						<li v-for="(item, index) in pageIndex == 0 ? rounds.slice(0, 4) : rounds.slice(pageIndex * 4, (pageIndex + 1) * 4)" :key="`${index}g`" v-if="roundsIndex == 3">
							<span class="name">
								<div class="name-box">
									<div :class="item.seed_num || loadingBox ? 'name-box-top-blod' : 'name-box-top'">
										<div class="name-box-top-site" v-if="item.site">{{ item.site }}</div>
										<div class="name-box-top-name">
											<span v-if="item.team_name">{{ item.team_name }}</span>
											<span v-else>{{ item.user_name }}</span>
											<div v-if="item.seed_num" style="display: flex;">(<div style="color: red">{{ item.seed_num }}</div>)
											</div>
										</div>
									</div>
									<div style="position: absolute;top: 55px;width: 100%;height: 20px;line-height: 20px;display: flex;" v-if="roundsIndex > 0 && item.score">
										<div style="display: flex;margin-left: 4px;" v-for="(game, gameIndex) in item.score" :key="`${gameIndex}d`">
											<div>{{ item | Score(game) }}</div>
											<div v-if="game.tiebreak">({{ game.tiebreak }})</div>
										</div>
										<span style="margin-left: 2px;" v-if="item.waiver_user !== 0">弃</span>
									</div>
									<div :class="loadingBox ? 'name-box-bot-limit-loading' : 'name-box-bot-limit'" v-if="item.one_limit && roundsIndex == 0">
										{{ item.one_limit | player_limit }}
									</div>
								</div>
							</span>
						</li>
						<li v-for="(item, index) in pageIndex == 0 ? rounds.slice(0, 2) : rounds.slice(pageIndex * 2, (pageIndex + 1) * 2)" :key="`${index}h`" v-if="roundsIndex == 4">
							<span class="name">
								<div class="name-box">
									<div :class="item.seed_num || loadingBox ? 'name-box-top-blod' : 'name-box-top'">
										<div class="name-box-top-site" v-if="item.site">{{ item.site }}</div>
										<div class="name-box-top-name">
											<span v-if="item.team_name">{{ item.team_name }}</span>
											<span v-else>{{ item.user_name }}</span>
											<div v-if="item.seed_num" style="display: flex;">(<div style="color: red">{{ item.seed_num }}</div>)
											</div>
										</div>
									</div>
									<div style="position: absolute;top: 55px;width: 100%;height: 20px;line-height: 20px;display: flex;" v-if="roundsIndex > 0 && item.score">
										<div style="display: flex;margin-left: 4px;" v-for="(game, gameIndex) in item.score" :key="`${gameIndex}e`">
											<div>{{ item | Score(game) }}</div>
											<div v-if="game.tiebreak">({{ game.tiebreak }})</div>
										</div>
										<span style="margin-left: 2px;" v-if="item.waiver_user !== 0">弃</span>
									</div>
									<div :class="loadingBox ? 'name-box-bot-limit-loading' : 'name-box-bot-limit'" v-if="item.one_limit && roundsIndex == 0">
										{{ item.one_limit | player_limit }}
									</div>
								</div>
							</span>
						</li>
						<li v-for="(item, index) in pageIndex == 0 ? rounds.slice(0, 1) : rounds.slice(pageIndex * 1, (pageIndex + 1) * 1)" :key="`${index}g`" v-if="roundsIndex == 5">
							<span class="name">
								<div class="name-box">
									<div :class="item.seed_num || loadingBox ? 'name-box-top-blod' : 'name-box-top'">
										<div class="name-box-top-site" v-if="item.site">{{ item.site }}</div>
										<div class="name-box-top-name">
											<span v-if="item.team_name">{{ item.team_name }}</span>
											<span v-else>{{ item.user_name }}</span>
											<div v-if="item.seed_num" style="display: flex;">(<div style="color: red">{{ item.seed_num }}</div>)
											</div>
										</div>
									</div>
									<div style="position: absolute;top: 55px;width: 100%;height: 20px;line-height: 20px;display: flex;" v-if="roundsIndex > 0 && item.score">
										<div style="display: flex;margin-left: 4px;" v-for="(game, gameIndex) in item.score" :key="`${gameIndex}f`">
											<div>{{ item | Score(game) }}</div>
											<div v-if="game.tiebreak">({{ game.tiebreak }})</div>
										</div>
										<span style="margin-left: 2px;" v-if="item.waiver_user !== 0">弃</span>
									</div>
									<div :class="loadingBox ? 'name-box-bot-limit-loading' : 'name-box-bot-limit'" v-if="item.one_limit && roundsIndex == 0">
										{{ item.one_limit | player_limit }}
									</div>
								</div>
							</span>
						</li>
					</ul>
				</div>
			</div>
			<div style="display: flex;margin-top: 40px;justify-content: center;width: 70%;margin: 0 auto;height: 168px" v-if="seedStatus">
				<div v-if="gridtable.length <= 4" style="display: flex;justify-content: space-between;width: 100%;">
					<table class="gridtable" style="width: 80%;height: 100%;text-align: center;">
						<tr>
							<th>种子号</th>
							<th>姓名</th>
							<th>签位</th>
							<th>单位</th>
						</tr>
						<tr v-for="(item, index) in gridtable" :key="index">
							<td>{{ item.seed_site }}</td>
							<td>{{ item.name }}</td>
							<td>{{ item.sign }}</td>
							<td>{{ item.company }}</td>
						</tr>
					</table>
					<table class="gridtable" style="width: 20%;height: 100%;text-align: center;">
						<tr><th style="height: 10px;line-height: 10px;">抽签时间</th></tr>
						<tr>
							<td style="height: 12px;line-height: 12px;text-align: center;">{{ drawTimes }}</td>
						</tr>
						<tr><th>抽签代表</th></tr>
						<tr><td></td></tr>
						<tr><th>裁判长签名</th></tr>
						<tr>
							<td style="text-align: center;">{{ name }}</td>
						</tr>
					</table>
				</div>
				<div v-if="gridtable.length > 4 && pdfs == 1" style="display: flex;justify-content: space-between;width: 100%;">
					<table class="gridtable" style="width: 40%;height: 100%;text-align: center;">
						<tr>
							<th>种子号</th>
							<th>姓名</th>
							<th>签位</th>
							<th>单位</th>
						</tr>
						<tr v-for="(item, index) in gridtable.slice(0, 4)" :key="index">
							<td>{{ item.seed_site }}</td>
							<td>{{ item.name }}</td>
							<td>{{ item.sign }}</td>
							<td>{{ item.company }}</td>
						</tr>
					</table>
					<table class="gridtable" style="width: 40%;height: 100%;text-align: center;">
						<tr>
							<th>种子号</th>
							<th>姓名</th>
							<th>签位</th>
							<th>单位</th>
						</tr>
						<tr v-for="(item, index) in gridtable.slice(4, 8)" :key="index">
							<td>{{ item.seed_site }}</td>
							<td>{{ item.name }}</td>
							<td>{{ item.sign }}</td>
							<td>{{ item.company }}</td>
						</tr>
					</table>
					<table class="gridtable" style="width: 20%;height: 100%;text-align: center;">
						<tr><th style="height: 10px;line-height: 10px;">抽签时间</th></tr>
						<tr>
							<td style="height: 12px;line-height: 12px;text-align: center;">{{ drawTimes }}</td>
						</tr>
						<tr><th>抽签代表</th></tr>
						<tr><td></td></tr>
						<tr><th>裁判长签名</th></tr>
						<tr>
							<td style="text-align: center;">{{ name }}</td>
						</tr>
					</table>
				</div>
				<div v-if="gridtable.length > 4 && pdfs > 1 && pageIndex < gridtablepage" style="display: flex;justify-content: space-between;width: 100%;">
					<table class="gridtable" style="width: 40%;height: 100%;text-align: center;">
						<tr>
							<th>种子号</th>
							<th>姓名</th>
							<th>签位</th>
							<th>单位</th>
						</tr>
						<tr v-for="(item, index) in gridtable.slice(2 * pageIndex * 4, (2 * pageIndex + 1) * 4)" :key="index">
							<td>{{ item.seed_site }}</td>
							<td>{{ item.name }}</td>
							<td>{{ item.sign }}</td>
							<td>{{ item.company }}</td>
						</tr>
					</table>
					<table class="gridtable" style="width: 40%;height: 100%;text-align: center;">
						<tr>
							<th>种子号</th>
							<th>姓名</th>
							<th>签位</th>
							<th>单位</th>
						</tr>
						<tr v-for="(item, index) in gridtable.slice((2 * pageIndex + 1) * 4, (2 * pageIndex + 2) * 4)" :key="index">
							<td>{{ item.seed_site }}</td>
							<td>{{ item.name }}</td>
							<td>{{ item.sign }}</td>
							<td>{{ item.company }}</td>
						</tr>
					</table>
					<table class="gridtable" style="width: 20%;height: 100%;text-align: center;">
						<tr><th style="height: 10px;line-height: 10px;">抽签时间</th></tr>
						<tr>
							<td style="height: 12px;line-height: 12px;text-align: center;">{{ drawTimes }}</td>
						</tr>
						<tr><th>抽签代表</th></tr>
						<tr><td></td></tr>
						<tr><th>裁判长签名</th></tr>
						<tr>
							<td style="text-align: center;">{{ name }}</td>
						</tr>
					</table>
				</div>
			</div>
			<!-- 添加水印 -->
			<div style="position: absolute;top: 50%;left:50%;transform:translate(-50%,-50%);"><img style="opacity: 0.2;" width="100%" src="http://qncdn.tissys.com/admin/assets/bg.png" alt=""></div>
		</div>
	</div>
</template>
<script>
import { mapState } from 'vuex';
import layoutTableHeader from './layoutTableHeader';
export default {
	data() {
		return {
			rankList: [],
			roundsList: [{}],
			isGroup: 0,
      state: {},
      complete:[]
		};
	},
	components: {
		layoutTableHeader
	},
	props: {
		LayoutKnockResult: Array,
		loadingBox: Boolean,
		project_name: String,
		seed_site: String,
		drawTime: Number,
		name: String,
		seedStatus: Boolean,
		customStyle: Boolean,
		getSecond: Array,
		editNameBoo: Boolean,
		groupId: Number,
		elim_way: Number,
		wheel_num: Number,
	},
	filters: {
		player_limit(val) {
			return val.substring(0, 8);
		},
		secondSite(val) {
			if (!val) return '';
			if (!isNaN(Number(val))) return val;
			return val.substring(1, val.length);
		},
		Score(item, val) {
			//高比分在前
			if (item.user_sign_id == item.sign_id_a) {
				return val.top || val.bot  ? `${val.top}-${val.bot}` : '';
			} else {
				return val.top || val.bot ? `${val.bot}-${val.top}` : '';
			}
		}
	},
	watch: {
		loadingBox(val) {},
		state(val) {},
	},
	computed: {
		...mapState({
			VuexKnockResult: 'LayoutKnockResult',
			MatchInfoLayout: 'MatchInfoLayout'
		}),
		drawTimes() {
			let unixtime = this.drawTime;
			let unixTimestamp = new Date(unixtime * 1000);
			let Y = unixTimestamp.getFullYear();
			let M = unixTimestamp.getMonth() + 1 >= 10 ? unixTimestamp.getMonth() + 1 : '0' + (unixTimestamp.getMonth() + 1);
			let D = unixTimestamp.getDate() >= 10 ? unixTimestamp.getDate() : '0' + unixTimestamp.getDate();
			let h = unixTimestamp.getHours() >= 10 ? unixTimestamp.getHours() : '0' + unixTimestamp.getHours();
			let m = unixTimestamp.getMinutes() >= 10 ? unixTimestamp.getMinutes() : '0' + unixTimestamp.getMinutes();
			let s = unixTimestamp.getSeconds() >= 10 ? unixTimestamp.getSeconds() : '0' + unixTimestamp.getSeconds();
			let toDay = Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s;
			return toDay;
		},
		gridtablepage() {
			let page = parseInt(this.seed_site.split('，').length / 4) + 1;
			console.log(page);
			return page;
		},
		gridtable() {
			let seed = this.seed_site == '没有种子' ? false : true;
			if (seed) {
				let substrArr = [];
				let seed_site = this.seed_site.split('，');
				let surplus;
				for (let i = 0; i < seed_site.length; i++) {
					let obj = {};
					obj.seed_site = seed_site[i].split('-')[0];
					obj.name = seed_site[i].split('(')[0].split('-')[1];
					obj.sign = seed_site[i].split('(')[1].split(')')[0];
					obj.company = seed_site[i].split('-')[2];
					substrArr.push(obj);
				}
				substrArr.sort(this.compare('seed_site'));
				if (seed_site.length / 4 != 0 && seed_site.length > 4) {
					surplus = 8 - seed_site.length;
					for (let i = 0; i < surplus; i++) {
						let obj = {};
						obj.seed_site = '';
						obj.name = '';
						obj.sign = '';
						obj.company = '';
						substrArr.push(obj);
					}
				} else {
					surplus = 4 - seed_site.length;
					for (let i = 0; i < surplus; i++) {
						let obj = {};
						obj.seed_site = '';
						obj.name = '';
						obj.sign = '';
						obj.company = '';
						substrArr.push(obj);
					}
				}

				return substrArr;
			} else {
				let substrArr = [];
				for (let i = 0; i < 4; i++) {
					let obj = {};
					obj.seed_site = '';
					obj.name = '';
					obj.sign = '';
					obj.company = '';
					substrArr.push(obj);
				}
				return substrArr;
			}
		},
		pdfLoading_hideRounds() {
			return roundsIndex => {
				let roundsLength = this.rankArr.length - 1 - 1;
				if (this.rankArr.length > 6 && roundsIndex - roundsLength > 3) return false; //64 128 256
				if (roundsIndex > 0) return true;
				return false;
			};
		},
		spacing() {
			return this.rankList[0].length;
		},
		pdfs() {
			let merchant = null;
			if (this.rankList[0].length > 32) {
				merchant = this.rankList[0].length / 32;
			} else {
				merchant = 1;
			}
			return merchant;
		},
		rankArr() {
			let arr = [];
			let rounds = 0;
			let arrLength = 0;
			let val = JSON.parse(JSON.stringify(this.LayoutKnockResult));
			this.rankList = [];
			this.roundsList = [{}];
			//第一轮
			for (let j in val[0]) {
				if (typeof val[0][j] == 'object') {
					arr.push(val[0][j]);
					arrLength = arrLength + 1;
				}
			}
			rounds = Math.log(arrLength) / Math.log(2);
			this.rankList.push(arr);
			arrLength = arrLength / 2;
			for (let i = 0; i < rounds; i++) {
				let round = [];
				if (i == rounds - 1) {
					this.roundsList.push({
						roundsName: '决赛'
					});
				} else {
					if (i == rounds - 2) {
						this.roundsList.push({
							roundsName: '半决赛'
						});
					} else {
						let num = i + 1;
						this.roundsList.push({
							roundsName: '第' + num + '轮'
						});
					}
				}
				for (let j = 0; j < arrLength; j++) {
					round.push({
						user_name: '',
						site: ''
					});
				}
				arrLength = arrLength / 2;
				this.rankList.push(round);
			}
			//抛开第一轮 进入后几轮
			for (let round in val) {
				if (round > 0) {
					for (let battle in val[round]) {
						this.rankList[round][parseInt(val[round][battle].field) - 1] = val[round][battle];
					}
				}
			}
			//第一轮轮空自动进第二轮
			for (let playerIndex in val[0]) {
				if (val[0][playerIndex].user_name === '轮空位' || val[0][playerIndex].user_name === '轮空') {
					//odd  even
					let nextRoundPlayer = playerIndex % 2 == 0 ? parseInt(playerIndex) + 1 : parseInt(playerIndex) - 1; //判断奇偶
					let nextRoundIndex = Math.ceil((parseInt(playerIndex) + 1) / 2) - 1;
					this.rankList[1][nextRoundIndex] = val[0][nextRoundPlayer];
				}
			}
			return this.rankList;
		}
	},
	methods: {
		compare(property) {
			//按对象属性值排序
			return function(a, b) {
				var value1 = a[property];
				var value2 = b[property];
				return value1 - value2;
			};
		},
		//获取sign_id相同的对象
		changeName(index){
			for (let s in this.getSecond) {
				if (this.getSecond[s].sign_id == this.state[index]) {
					// console.log(this.getSecond[s].sign_id,this.state[index])
					this.complete[index] = this.getSecond[s]
					this.getSecond[s].status = true
				}
			}
		},
		//保存签位
		saveSign(){
			// var result = this.complete.filter((res)=>{
			// 	return res != null
			// })
			// this.complete = result
			if(this.complete.length%2!=0){
				this.complete.push(null)
			}
			console.log(this.complete , this.wheel_num,this.getSecond)
				if ((this.complete.length - this.wheel_num) == this.getSecond.length) {
					this.$axios.post('SecondSignOnce/save_second_sign', {
						group_id: this.groupId,
						sign: this.complete
					}, {
						headers: {
							token: window.sessionStorage.getItem('token')
						}
					}).then((res) => {
					if (res.data.code == 2000) {
						this.$message({
							message: res.data.msg,
							type: 'success'
						});
						setTimeout(() => {this.$router.go(0)}, 100)
					} else {
						this.$message({
							message: res.data.msg,
							type: 'error'
						});
					}
					})
				} else {
					this.$message({
						message: '您还有未选择的签位！',
						type: 'error'
					});
				}
		},
		cancelSign(){
			this.editNameBoo = true
		}
	}
};
</script>
<style lang="less" scoped>
.tableMain-loading .signEightSpacing{
	padding: 80px 0 !important;
	.rank0 li{
		height: 180px !important;
		.name{
			top: 170px !important;
		}
	}
	.rank0 li:nth-child(1){
		.name{
			top: 36px !important;
		}
	}
	.rank0 li:nth-child(1){
		height: 50px !important;
	}
	.rank1 li{
		height: 364px !important;
	}
	.rank1 li:nth-child(2){
		height: 144px !important;
	}
	.rank2 li{
		height: 728px !important;
	}
	.rank2 li:nth-child(2){
		height: 333px !important;
	}
	.rank3 li:nth-child(2){
		height: 700px !important;
	}
}
.tableMain-loading .signSixteenSpacing{
	.rank0 li{
		height: 90px !important;
		.name{
			top: 80px !important;
		}
	}
	.rank1 li{
		height: 182px !important;
	}
	.rank1 li:nth-child(2){
		height: 139px !important;
	}
	.rank2 li{
		height: 364px !important;
	}
	.rank2 li:nth-child(2){
		height: 236px !important;
	}
	.rank3 li{
		height: 728px !important;
	}
	.rank3 li:nth-child(2){
		height: 422px !important;
	}
	.rank4 li:nth-child(2){
		height: 800px !important;
	}
}
#customStyle {
	.rank0 li {
		width: 30px;
	}
	.rank0 li:nth-child(odd) {
		width: 31px;
	}
	.rank1 li {
		width: 160px;
	}
	.rank1 li:nth-child(even) {
		width: 161px;
	}
	.rank2 li {
		width: 160px;
	}
	.rank2 li:nth-child(even) {
		width: 161px;
	}
	.rank3 li {
		width: 160px;
	}
	.rank3 li:nth-child(even) {
		width: 161px;
	}
	.rank4 li {
		width: 160px;
	}
	.rank4 li:nth-child(even) {
		width: 161px;
	}
	.rank5 li {
		width: 160px;
	}
	.rank5 li:nth-child(even) {
		width: 161px;
	}
}
table.gridtable {
	width: 100%;
	font-family: verdana, arial, sans-serif;
	font-size: 11px;
	color: #333333;
	border-width: 1px;
	border-color: #666666;
	border-collapse: collapse;
}

table.gridtable th {
	height: 7px;
	line-height: 7px;
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #dedede;
}

table.gridtable td {
	line-height: 15px;
	height: 15px;
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #ffffff;
}

.layout-table-header {
	height: 140px;
	margin-top: 20px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	font-family: KaiTi, serif;
}

.match-name {
	width: 50%;
	height: 50%;
	padding-left: 33.34%;
}

.match-name-box {
	width: 70%;
	margin: 0 auto;
	height: 50%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.match-name-logo {
	width: 50px;
	height: 50px;
	float: right;
	margin-right: 10px;
}

.match-name-word {
	font-size: 30px;
}

.match-project-name {
	width: 70%;
	margin: 0 auto;
	height: 20%;
	font-size: 26px;
	justify-content: center;
}

.match-info {
	width: 70%;
	margin: 0 auto;
	justify-content: space-between;
	font-size: 14px;
	align-items: center;
	font-family: Microsoft YaHei, serif;
}

.match-info-item {
	flex: 1;
	overflow: hidden;
	background: rgba(66, 185, 131, 0.4);
}

.flip-list-move {
	transition: transform 1s;
}

.isGroup {
	border-right: 1px solid #eaeaea;
	border-bottom: 0;
	background-color: #fff;
	color: #409eff !important;
}

.isGroup1 {
	border-right: 1px solid #eaeaea;
	border-left: 1px solid #eaeaea;
	border-bottom: 0;
	background-color: #fff;
	color: #409eff !important;
}

.name-box {
	display: flex;
	flex-direction: column;
	height: 55px;
}

.name-box-top {
	height: 40%;
	display: flex;
	margin-top: 15%;
	align-items: baseline;
}

.name-box-top-blod {
	height: 40%;
	display: flex;
	font-weight: bold;
	margin-top: 15%;
	align-items: baseline;
}

.name-box-top-site {
	margin-left: 4px;
	text-align: right;
}

.name-box-top-name {
	height: 29px !important;
	line-height: 29px !important;
	margin-left: 5px;
	display: flex;
	align-items: baseline;
	overflow: hidden;
}
.name-box-top-name > span{
  white-space: nowrap;
  overflow: hidden;
}
.name-box-bot-limit {
	font-size: 8px;
	display: flex;
	height: 50%;
	margin-left: 10%;
	padding-left: 5px;
	overflow: hidden;
}

.name-box-bot-limit-loading {
	font-size: 15px;
	display: flex;
	height: 50%;
	margin-left: 10%;
	margin-top: 5px;
	padding-left: 5px;
	overflow: hidden;
}

.tableMain {
	margin-top: 20px;
	padding: 0 20px;

	.scoreBox {
		width: 100%;
		display: flex;
		justify-content: center;
		padding-bottom: 30px;

		.roundName {
			font-size: 15px;
		}

		.rank0 {
			padding-left: 150px;

			li {
				width: 120px;
				height: 40px;
				border-bottom: 1px solid #727272;
				position: relative;

				.name {
					display: inline-block;
					height: 40px;
					line-height: 40px;
					width: 150px;
					text-align: left;
					position: absolute;
					bottom: -15px;
					left: -150px;
					top: 30px;

					.name-box {
						display: flex;
						flex-direction: column;
						height: 40px;
					}

					.name-box-top {
						height: 20px;
						display: flex;
						margin-top: 0%;
						align-items: baseline;
					}

					.name-box-top-blod {
						height: 20px;
						display: flex;
						font-weight: bold;
						margin-top: 0%;
						align-items: baseline;
					}

					.name-box-top-site {
						margin-left: 0;
						width: 15%;
						line-height: 20px;
						text-align: right;
					}

					.name-box-top-name {
						margin-left: 5px;
						height: 20px;
						line-height: 20px;
						display: flex;
						align-items: baseline;
						width: 85%;
						>span{
							white-space: nowrap;
							width: 80%;
							overflow: hidden;
						}
					}

					.name-box-bot-limit {
						font-size: 8px;
						display: flex;
						height: 20px;
						line-height: 20px;
						margin-left: 15%;
						padding-left: 5px;
					}

					.name-box-bot-limit-loading {
						font-size: 15px;
						display: flex;
						height: 20px;
						margin-left: 10%;
						margin-top: 5px;
						padding-left: 5px;
					}
				}
			}

			li:nth-child(even) {
				//奇数
				border-right: 1px solid #727272;
			}

			li:nth-child(odd) {
				//偶数
				width: 121px;
			}
		}

		.rank1 {
			border-left: 1px solid #eaeaea;
			position: relative;

			li {
				width: 120px;
				height: 81px;
				border-bottom: 1px solid #727272;
				position: relative;

				.name {
					display: inline-block;
					width: 220px;
					text-align: center;
					position: absolute;
					bottom: 0px;
					left: 0px;
				}
			}

			li:nth-child(2) {
				height: 61px;
			}

			li:nth-child(odd) {
				border-right: 1px solid #727272;
			}

			li:nth-child(even) {
				width: 121px;
			}

			li:first-child {
				position: absolute;
				border: 0;
				text-align: center;
			}
		}

		.rank2 {
			border-left: 1px solid #eaeaea;
			position: relative;

			li {
				width: 120px;
				height: 163px;
				border-bottom: 1px solid #727272;
				position: relative;

				.name {
					display: inline-block;
					width: 220px;
					text-align: center;
					position: absolute;
					bottom: 0px;
					left: 0px;
				}
			}

			li:nth-child(2) {
				height: 102px;
			}

			li:nth-child(odd) {
				border-right: 1px solid #727272;
			}

			li:nth-child(even) {
				width: 121px;
			}

			li:first-child {
				position: absolute;
				border: 0;
				text-align: center;
			}
		}

		.rank3 {
			border-left: 1px solid #eaeaea;
			position: relative;

			li {
				width: 120px;
				height: 327px;
				border-bottom: 1px solid #727272;
				position: relative;

				.name {
					display: inline-block;
					width: 220px;
					text-align: center;
					position: absolute;
					bottom: 0px;
					left: 0px;
				}
			}

			li:nth-child(2) {
				height: 182px;
			}

			li:nth-child(odd) {
				border-right: 1px solid #727272;
			}

			li:nth-child(even) {
				width: 121px;
			}

			li:first-child {
				position: absolute;
				border: 0;
				text-align: center;
			}
		}

		.rank4 {
			border-left: 1px solid #eaeaea;
			position: relative;

			li {
				width: 120px;
				height: 652px;
				border-bottom: 1px solid #727272;
				position: relative;

				.name {
					display: inline-block;
					width: 220px;
					text-align: center;
					position: absolute;
					bottom: 0px;
					left: 0px;
				}

				.champion {
					display: inline-block;
					width: 80px;
					position: absolute;
					left: 226px;
					top: 348px;
				}
			}

			li:nth-child(2) {
				height: 344px;
			}

			li:nth-child(odd) {
				border-right: 1px solid #727272;
			}

			li:nth-child(even) {
				width: 121px;
			}

			li:first-child {
				position: absolute;
				border: 0;
				text-align: center;
			}
		}

		.rank5 {
			border-left: 1px solid #eaeaea;
			position: relative;

			li {
				width: 120px;
				height: 1296px;
				border-bottom: 1px solid #727272;
				position: relative;

				.name {
					display: inline-block;
					width: 220px;
					text-align: center;
					position: absolute;
					bottom: 0px;
					left: 0px;
				}

				.champion {
					display: inline-block;
					width: 80px;
					position: absolute;
					left: 226px;
					top: 348px;
				}
			}

			li:nth-child(2) {
				height: 682px;
			}

			li:nth-child(odd) {
				border-right: 1px solid #727272;
			}

			li:nth-child(even) {
				width: 121px;
			}

			li:first-child {
				position: absolute;
				border: 0;
				text-align: center;
			}
		}

		.rank6 {
			border-left: 1px solid #eaeaea;
			position: relative;

			li {
				width: 120px;
				height: 2592px;
				border-bottom: 1px solid #727272;
				position: relative;

				.name {
					display: inline-block;
					width: 220px;
					text-align: center;
					position: absolute;
					bottom: 0px;
					left: 0px;
				}

				.champion {
					display: inline-block;
					width: 80px;
					position: absolute;
					left: 226px;
					top: 348px;
				}
			}

			li:nth-child(2) {
				height: 1330px;
			}

			li:nth-child(odd) {
				border-right: 1px solid #727272;
			}

			li:nth-child(even) {
				width: 121px;
			}

			li:first-child {
				position: absolute;
				border: 0;
				text-align: center;
			}
		}

		.rank7 {
			border-left: 1px solid #eaeaea;
			position: relative;

			li {
				width: 120px;
				height: 5184px;
				border-bottom: 1px solid #727272;
				position: relative;

				.name {
					display: inline-block;
					width: 220px;
					text-align: center;
					position: absolute;
					bottom: 0px;
					left: 0px;
				}

				.champion {
					display: inline-block;
					width: 80px;
					position: absolute;
					left: 226px;
					top: 348px;
				}
			}

			li:nth-child(2) {
				height: 2626px;
			}

			li:nth-child(odd) {
				border-right: 1px solid #727272;
			}

			li:nth-child(even) {
				width: 121px;
			}

			li:first-child {
				position: absolute;
				border: 0;
				text-align: center;
			}
		}

		.rank8 {
			border-left: 1px solid #eaeaea;
			position: relative;

			li {
				width: 120px;
				height: 10496px;
				border-bottom: 1px solid #727272;
				position: relative;

				.name {
					display: inline-block;
					width: 220px;
					text-align: center;
					position: absolute;
					bottom: 0px;
					left: 0px;
				}

				.champion {
					display: inline-block;
					width: 80px;
					position: absolute;
					left: 226px;
					top: 348px;
				}
			}

			li:nth-child(2) {
				height: 5260px;
			}

			li:nth-child(odd) {
				border-right: 1px solid #727272;
			}

			li:nth-child(even) {
				width: 121px;
			}

			li:first-child {
				position: absolute;
				border: 0;
				text-align: center;
			}
		}
	}
}

.tableMain-loading {
	padding: 0 20px;
	padding-bottom: 35px;

	.scoreBox {
		width: 100%;
		display: flex;
		justify-content: center;
		padding-bottom: 30px;
		font-size: 18px;

		.roundName {
			font-size: 20px;
		}

		.rank0 {
			padding-left: 180px;

			li {
				width: 120px;
				height: 55px;
				height: 45px;
				border-bottom: 2px solid #727272;
				position: relative;

				.name {
					display: inline-block;
					height: 40px;
					line-height: 40px;
					width: 180px;
          			text-align: left;
					position: absolute;
					bottom: -15px;
					left: -180px;
					top: 36px;

					.name-box {
						display: flex;
						flex-direction: column;
						height: 40px;
					}

					.name-box-top {
						height: 20px;
						display: flex;
						margin-top: 0%;
						align-items: baseline;
					}

					.name-box-top-blod {
						height: 20px;
						display: flex;
						font-weight: bold;
						margin-top: 0%;
						align-items: baseline;
					}

					.name-box-top-site {
						width: 15%;
						line-height: 20px;
						text-align: right;
					}

					.name-box-top-name {
						margin-left: 5px;
						height: 20px;
						line-height: 20px;
						width: 85%;
						display: flex;
						align-items: baseline;
						>span{
							white-space: nowrap;
							width: 80%;
							overflow: hidden;
						}
					}

					.name-box-bot-limit {
						font-size: 8px;
						display: flex;
						height: 20px;
						line-height: 20px;
						margin-left: 15%;
						padding-left: 5px;
					}

					.name-box-bot-limit-loading {
						font-size: 15px;
						display: flex;
						height: 20px;
						margin-left: 15%;
						margin-top: 3px;
						line-height: 20px;
						padding-left: 5px;
					}
				}
			}

			li:nth-child(even) {
				//奇数
				border-right: 2px solid #727272;
			}

			li:nth-child(odd) {
				//偶数
				width: 121px;
			}
		}

		.rank1 {
			// border-left: 1px solid #eaeaea;
			position: relative;

			li {
				width: 120px;
				// height: 112px;
				height: 92px;
				border-bottom: 2px solid #727272;
				position: relative;

				.name {
					display: inline-block;
					width: 204px;
					text-align: center;
					position: absolute;
					bottom: 0px;
					left: 0px;
				}
			}

			li:nth-child(2) {
				// height: 84px;
				// height: 74px;
				height: 68px;
			}

			li:nth-child(odd) {
				border-right: 2px solid #727272;
			}

			li:nth-child(even) {
				width: 121px;
			}

			li:first-child {
				position: absolute;
				border: 0;
				text-align: center;
			}
		}

		.rank2 {
			// border-left: 1px solid #eaeaea;
			position: relative;

			li {
				width: 120px;
				// height: 226px;
				height: 186px;
				border-bottom: 2px solid #727272;
				position: relative;

				.name {
					display: inline-block;
					width: 220px;
					text-align: center;
					position: absolute;
					bottom: 0px;
					left: 0px;
				}
			}

			li:nth-child(2) {
				// height: 140px;
				// height: 125px;
				height: 115px;
			}

			li:nth-child(odd) {
				border-right: 2px solid #727272;
			}

			li:nth-child(even) {
				width: 121px;
			}

			li:first-child {
				position: absolute;
				border: 0;
				text-align: center;
			}
		}

		.rank3 {
			// border-left: 1px solid #eaeaea;
			position: relative;

			li {
				width: 120px;
				// height: 454px;
				height: 376px;
				border-bottom: 2px solid #727272;
				position: relative;

				.name {
					display: inline-block;
					width: 220px;
					text-align: center;
					position: absolute;
					bottom: 0px;
					left: 0px;
				}
			}

			li:nth-child(2) {
				// height: 251px;
				// height: 222px;
				height: 205px;
			}

			li:nth-child(odd) {
				border-right: 2px solid #727272;
			}

			li:nth-child(even) {
				width: 121px;
			}

			li:first-child {
				position: absolute;
				border: 0;
				text-align: center;
			}
		}

		.rank4 {
			// border-left: 1px solid #eaeaea;
			position: relative;

			li {
				width: 120px;
				// height: 908px;
				height: 746px;
				border-bottom: 2px solid #727272;
				position: relative;

				.name {
					display: inline-block;
					width: 220px;
					text-align: center;
					position: absolute;
					bottom: 0px;
					left: 0px;
				}

				.champion {
					display: inline-block;
					width: 80px;
					position: absolute;
					left: 226px;
					top: 348px;
				}
			}

			li:nth-child(2) {
				// height: 478px;
				height: 422px;
			}

			li:nth-child(odd) {
				border-right: 2px solid #727272;
			}

			li:nth-child(even) {
				width: 121px;
			}

			li:first-child {
				position: absolute;
				border: 0;
				text-align: center;
			}
		}

		.rank5 {
			// border-left: 1px solid #eaeaea;
			position: relative;

			li {
				width: 120px;
				height: 1827px;
				border-bottom: 2px solid #727272;
				position: relative;

				.name {
					display: inline-block;
					width: 220px;
					text-align: center;
					position: absolute;
					bottom: 0px;
					left: 0px;
				}

				.champion {
					display: inline-block;
					width: 80px;
					position: absolute;
					left: 226px;
					top: 348px;
				}
			}

			li:nth-child(2) {
				// height: 924px;
				height: 800px;
			}

			li:nth-child(odd) {
				border-right: 2px solid #727272;
			}

			li:nth-child(even) {
				width: 121px;
			}

			li:first-child {
				position: absolute;
				border: 0;
				text-align: center;
			}
		}

		.rank6 {
			// border-left: 1px solid #eaeaea;
			position: relative;

			li {
				width: 120px;
				height: 3646px;
				border-bottom: 2px solid #727272;
				position: relative;

				.name {
					display: inline-block;
					width: 220px;
					text-align: center;
					position: absolute;
					bottom: 0px;
					left: 0px;
				}

				.champion {
					display: inline-block;
					width: 80px;
					position: absolute;
					left: 226px;
					top: 348px;
				}
			}

			li:nth-child(2) {
				height: 1844px;
			}

			li:nth-child(odd) {
				border-right: 2px solid #727272;
			}

			li:nth-child(even) {
				width: 121px;
			}

			li:first-child {
				position: absolute;
				border: 0;
				text-align: center;
			}
		}

		.rank7 {
			// border-left: 1px solid #eaeaea;
			position: relative;

			li {
				width: 120px;
				height: 7287px;
				border-bottom: 2px solid #727272;
				position: relative;

				.name {
					display: inline-block;
					width: 220px;
					text-align: center;
					position: absolute;
					bottom: 0px;
					left: 0px;
				}

				.champion {
					display: inline-block;
					width: 80px;
					position: absolute;
					left: 226px;
					top: 348px;
				}
			}

			li:nth-child(2) {
				height: 3676px;
			}

			li:nth-child(odd) {
				border-right: 2px solid #727272;
			}

			li:nth-child(even) {
				width: 121px;
			}

			li:first-child {
				position: absolute;
				border: 0;
				text-align: center;
			}
		}

		.rank8 {
			// border-left: 1px solid #eaeaea;
			position: relative;

			li {
				width: 120px;
				height: 14336px;
				border-bottom: 2px solid #727272;
				position: relative;

				.name {
					display: inline-block;
					width: 220px;
					text-align: center;
					position: absolute;
					bottom: 0px;
					left: 0px;
				}

				.champion {
					display: inline-block;
					width: 80px;
					position: absolute;
					left: 226px;
					top: 348px;
				}
			}

			li:nth-child(2) {
				height: 7327px;
			}

			li:nth-child(odd) {
				border-right: 2px solid #727272;
			}

			li:nth-child(even) {
				width: 121px;
			}

			li:first-child {
				position: absolute;
				border: 0;
				text-align: center;
			}
		}
	}
}
</style>
